<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/log.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="login.html">登陆</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的注册框 -->
        <div class="login-dialog">
            <h3>用户注册</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username" onblur="user()">
            </div>
            <div id="warn1" class="warn"></div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password1" onblur="password1()">
            </div>
            <div id="warn2" class="warn"></div>
            <div class="row">
                <span>确认密码</span>
                <input type="password" id="password2" onblur="password2()">
            </div>
            <div id="warn3" class="warn"></div>
            <div class="row">
                <button id="submit" onclick=re()>提交</button>
            </div>
            <div class="warn" id="success"></div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var flag1=false
    var flag2=false
    var flag3=false
    function cid(id){
        return document.getElementById(id)
    }
    //检查账号是否为空
    function user(){
        if(cid("username").value==null || cid("username").value==""){
            cid("warn1").innerText="*用户名不能为空"
            return
        }         
        if(1){
            cid("warn1").innerText=""
            flag1=true
        }
    }
    //检查密码
    function password1(){
        if(cid("password1").value==null||cid("password1").value==""){

            cid("warn2").innerText="*密码不能为空！"
			return
		}
		if(cid("password1").value.length<4||cid("password1").value.length>25){

            cid("warn2").innerText="*密码长度为4-25！"
			return
		}
		if(1){
            cid("warn2").innerText=""
			flag2=true
		}
    }
       //检查密码
       function password2(){
        if(cid("password2").value==null||cid("password2").value==""){

            cid("warn3").innerText="*密码不能为空！"
			return
		}
		if(cid("password1").value!=cid("password2").value){

            cid("warn3").innerText="*两次密码要相同！"
			return
		}
		if(1){
            cid("warn3").innerText=""
			flag3=true
		}
    }
    function re(){
        if(cid("username").value==null || cid("username").value==""){
            cid("warn1").innerText="*用户名不能为空"
        }
        if(cid("password1").value==null||cid("password1").value==""){

            cid("warn2").innerText="*密码不能为空！"
        }
        if(cid("password2").value==null||cid("password2").value==""){

            cid("warn3").innerText="*密码不能为空！"
        }
        if(flag1 && flag2 && flag3){
            //一种请求后端的方式
            // jQuery.ajax({
            //     url:"/user/reg",
            //     type:"post",
            //     data:{
            //         "username":jQuery("#username").val().trim(),
            //         "password":jQuery("#password1").val().trim(),
            //     },success:function (data){
            //         if(data.code!=200){
            //             $("warn1").innerText="*用户名重复";
            //             $("success").innerText="注册失败！！！";
            //         }else{
            //             $("success").innerText="注册成功！！！";
            //             location.href="./login.html";
            //         }
            //     }
            // })
                var username=jQuery("#username").val().trim();
                var password=jQuery("#password1").val().trim();
            $.post("/user/reg",{
                "uName":username,
                "password":password,
            },function(data){
                if(data.code!=200){
                    cid("warn1").innerText="*用户名重复";
                    cid("success").innerText="注册失败！！！";
                }else{
                    cid("success").innerText="注册成功！！！";
                    location.href="./login.html";
                }
            });
        }
    }
</script>



</html>